<template>
    <el-dialog
            :visible.sync="mapServiceDialogVisible"
            title="预览地图服务"
            :close-on-click-modal="false"
            @open="serviceMapInit()"
            v-dialogDrag>
        <div ref="basicMapbox" id="mapwmx" style="height: 300px;"></div>
        <!--<div style="margin-top: 20px;text-align: center">-->
            <!--<el-button type="primary" >确定</el-button>-->
            <!--<el-button >取消</el-button>-->
        <!--</div>-->
    </el-dialog>
</template>

<script>
    import axios from 'axios';
    import mapboxgl from "mapbox-gl"
    import MapboxLanguage from '@mapbox/mapbox-gl-language'
    import 'mapbox-gl/dist/mapbox-gl.css'

    export default {
        name: "mapServiceDialog",
        data() {
            return {
                mapServiceDialogVisible: false,
                id: '',
                url: '',
                extent: '',
                map:{}
            }
        },
        methods: {
            serviceMapInit() {
                this.$nextTick(function () {
                    let that = this;
                    mapboxgl.accessToken = 'pk.eyJ1IjoibGl5dWV5aSIsImEiOiJjanpkZmh1aGswMW91M3Bsa2ZxZmFpNGtjIn0.3O_iLJM7u3UyEyGBVKt1ug';
                    this.map = {};
                    this.map = new mapboxgl.Map({
                        container: "mapwmx",
                        style: 'mapbox://styles/mapbox/streets-v9',
                        center: [121.64, 29.70],
                        zoom: 4
                    });
                    // 设置语言
                    let language = new MapboxLanguage({defaultLanguage: "zh"});
                    this.map.addControl(language);
                    // 地图导航
                    let nav = new mapboxgl.NavigationControl();
                    this.map.addControl(nav, "top-right");
                    // 比例尺
                    let scale = new mapboxgl.ScaleControl({
                        maxWidth: 80,
                        unit: "imperial"
                    });
                    this.map.addControl(scale);
                    scale.setUnit("metric");
                    // 全屏
                    this.map.addControl(new mapboxgl.FullscreenControl());
                    //设置鼠标样式
                    this.map.getCanvas().style.cursor = 'default';
                    this.map.on('load', function () {

                        that.map.addLayer({
                            "id": that.id,
                            "type": "raster",
                            "source": {
                                "type": "raster",
                                "tiles": [that.url + "0"],
                                "tileSize": 256,
                            },
                        }, 'country-label-lg');

                    });

                        let bd = this.extent.split(',');
                        let item1 = [bd[0], bd[2]];
                        let item2 = [bd[1], bd[3],];
                        let bbox = [item1, item2];
                        this.map.fitBounds(bbox);

                })

            },
        },
        created() {
            let that = this;
            this.$Bus.$on("mapServiceDialogVisible", res => {
                that.mapServiceDialogVisible = res.visible;
                that.url = res.url;
                that.id = res.id;
                that.extent = res.extent;
                // that.serviceMapInit();
            })

        },
        mounted() {

        }
    }
</script>

<style scoped>
    @import url('../../../static/css/mapbox-gl.css');
    @import url('../../../static/css/mapbox-gl-draw.css');
</style>